.w {
    width: 1200px;
    margin: 0 auto;
}

.header {
    min-width: 1200px;
    height: 44px;
    line-height: 44px;
    background-color: #0092d8;

    .logo {
        width: 120px;
        height: 44px;

        h1 {
            width: 120px;
            height: 44px;

            a {
                display: block;
                width: 120px;
                height: 44px;
                line-height: 44px;
                background: url(../image/index_service_sprite_v3.png) no-repeat -80px 0px;
                background-size: 200px 80px;
            }
        }
    }

    .header-left {
        li {
            float: left;

            a {
                display: block;
                padding: 0 30px;
                line-height: 44px;
                font-size: 12px;
                color: #a3c3e6;

                &:hover {
                    color: #fff;
                }
            }
        }
    }

    .header-right {
        height: 44px;

        .search {
            position: relative;
            width: 180px;
            height: 44px;
            line-height: 44px;

            .iconfont {
                position: relative;
                top: 12px;
                right: 0;
                left: 25px;
                bottom: 0;
                margin: auto;
                background: url(../image/sy-top-right-img1.png) no-repeat right center;
                width: 45px;
                height: 20px;
                margin-right: 45px;
            }

            .sea {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                border: none;
                outline: none;
                padding-left: 25px;
                height: 42px;
                line-height: 44px;
                background: url(../image/search2.png) no-repeat 5px center;
                background-color: #eee;
                z-index: 2;
                display: none;
            }

            // margin-right: 50px;
            // background: url(../image/search2.png) no-repeat 5px center;
            // background-color: #fff;
        }
    }

    .phone {
        position: relative;
        width: 65px;
        height: 44px;

        .iconfont {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            background: url(../image/index_sprite.png);
            background-position: -120px -215px;
            z-index: 20;
        }

        .erweima {
            display: none;
            position: absolute;
            background-color: #fff;
            top: 44px;
            left: auto;
            right: -69px;
            width: 367px;
            height: 253px;
            z-index: 9;

            img {
                width: 367px;
                height: 253px;
            }
        }
    }

    .cart {
        position: relative;
        width: 65px;
        height: 44px;

        .iconfont {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            background: url(../image/index_sprite.png);
            background-position: -146px -215px;
            z-index: 20;
        }

        .cart-list {
            display: none;
            position: absolute;
            font-size: 12px;
            top: 44px;
            right: 0;
            width: 360px;
            height: 72px;
            text-align: center;
            line-height: 72px;
            background-color: #fff;
            border: 1px solid #e0e0e0;
        }
    }

    .login {
        box-sizing: border-box;
        padding-left: 15px;
        position: relative;
        width: 86px;
        height: 44px;
        text-align: center;

        .iconfont {
            width: 20px;
            height: 20px;
            position: absolute;
            float: left;
            top: 0;
            bottom: 0;
            margin: auto;
            background: url(../image/index_sprite.png);
            background-position: -35px -216px;
        }

        span {
            color: #fff;
            padding-left: 25px;
            float: left;
        }
    }
}

.notice {
    width: 100%;
    min-width: 1200px;
    height: 24px;
    background-color: #003b66;

    p {
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        color: #fff;
    }
}

.navText {
    overflow: hidden;
    min-width: 1200px;
    border-bottom: 1px solid #ccc;
    line-height: 40px;

    .navlist {
        li {
            width: 240px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #666;
            float: left;

            .iconfont {
                float: left;
                width: 40px;
                height: 40px;
                background-image: url(../image/index_service_sprite_v3.png);
                background-size: 200px 80px;
            }

            span {
                float: left;
                font-size: 12px;
            }
        }

        li:nth-child(1) {
            .iconfont {
                background-size: 200px 80px;
            }
        }

        li:nth-child(2) {
            .iconfont {
                background-position: -40px 0;
            }
        }

        li:nth-child(3) {
            .iconfont {
                background-position: 0 -40px;
            }
        }

        li:nth-child(4) {
            .iconfont {
                background-position: -40px -40px;
            }
        }

        li:nth-child(5) {
            .iconfont {
                background-position: -80px -40px;
            }

            span {
                color: #666;
            }
        }
    }
}

.banner {
    .ban-con {
        position: relative;
    }

    .prev {
        display: none;
        position: absolute;
        left: 230px;
        top: 220px;
        width: 40px;
        height: 60px;
        background: url(../image/index_sprite.png);
        background-position: -180px -59px;
        z-index: 10;

        &:hover {
            background-color: rgba(0, 0, 0, 0.6);
        }
    }

    &:hover .prev,
    &:hover .next {
        display: block;
    }

    .next {
        display: none;
        position: absolute;
        right: 10px;
        top: 220px;
        width: 40px;
        height: 60px;
        background: url(../image/index_sprite.png);
        background-position: -240px -59px;
        z-index: 10;
        background-color: transparent;

        &:hover {
            background-color: rgba(0, 0, 0, 0.6);
        }
    }

    .navlist {
        padding: 16px 0;
        width: 220px;
        height: 448px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 100;

        dl {
            height: 56px;
            line-height: 56px;
            color: #333;
            //   padding-left: 72px;

            &:hover {
                background-color: #071c20;
            }

            dt {
                .one {
                    float: left;
                    font-size: 12px;
                    color: #fff;
                }

                .two {
                    float: left;
                    color: #f0f0f0;
                    opacity: 0.5;
                    margin-left: 10px;
                }
            }

            .hot {
                display: inline-block;
                vertical-align: middle;
                width: 12px;
                height: 12px;
                margin-left: 3px;
                background: url(../image/index_sprite.png) no-repeat;
                background-position: -69px -188px;
            }

            .icon-cat {
                // position: absolute;
                float: left;
                margin: 14px 20px 0 21px;
                width: 30px;
                height: 30px;
                left: 21px;
                top: 14px;
                background: url(../image/index_sprite.png);
            }

            &:nth-child(1) {
                .icon-cat {
                    background-position: 0 0;
                }
            }

            &:nth-child(2) {
                .icon-cat {
                    background-position: -30px 0;
                }
            }

            &:nth-child(3) {
                .icon-cat {
                    background-position: -60px 0;
                }
            }

            &:nth-child(4) {
                .icon-cat {
                    background-position: -90px 0;
                }
            }

            &:nth-child(5) {
                .icon-cat {
                    background-position: -120px 0;
                }
            }

            &:nth-child(6) {
                .icon-cat {
                    background-position: -150px 0;
                }
            }

            &:nth-child(7) {
                .icon-cat {
                    background-position: -180px 0;
                }
            }

            &:nth-child(8) {
                .icon-cat {
                    background-position: -210px 0;
                }
            }

            dd {
                display: none;
                width: 1000px;
                position: absolute;
                top: 0;
                left: 220px;
                z-index: 999;

                ul {
                    background-color: #fff;
                }

                ul.one {
                    float: left;
                    box-sizing: border-box;
                    border-bottom: 1px solid #e0e0e0;
                    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1);
                    padding: 24px 0 0 16px;
                    width: 220px;
                    height: 480px;
                    font-size: 12px;
                    color: #666;

                    li {
                        width: 204px;
                        height: 40px;
                        margin: 0 0 14px;

                        a {
                            float: left;
                            width: 204px;
                            height: 40px;
                            color: #333;

                            &:hover {
                                color: #f60;
                            }

                            img {
                                width: 32px;
                                height: 32px;
                                margin: 0 16px 0 0;
                            }
                        }
                    }
                }

                ul.two {
                    float: left;
                    box-sizing: border-box;
                    border-bottom: 1px solid #e0e0e0;
                    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1);
                    width: 220px;
                    height: 480px;
                    font-size: 12px;
                    color: #666;

                    li {
                        a {
                            box-sizing: border-box;
                            float: left;
                            border: 1px solid #e0e0e0;
                            width: 220px;
                            height: 120px;
                            color: #333;
                            padding: 20px 0;

                            &:hover {
                                color: #f60;
                            }

                            span {
                                box-sizing: border-box;
                                line-height: 16px;
                                width: 128px;
                                float: left;
                                padding: 0 9px;
                                margin: 18px 0 0 0;
                            }

                            span:nth-child(3) {
                                margin: 8px 0 0 0;
                            }

                            img {
                                float: left;
                                width: 80px;
                                height: 80px;
                                margin: 0 0 0 10px;
                            }
                        }
                    }
                }

                ul.thr {
                    float: left;
                    box-sizing: border-box;
                    border-bottom: 1px solid #e0e0e0;
                    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1);
                    padding: 24px 0 0 16px;
                    width: 220px;
                    height: 480px;
                    font-size: 12px;
                    color: #666;

                    li {
                        box-sizing: border-box;
                        width: 220px;
                        height: 240px;
                        padding: 28px 50px;

                        a {
                            float: left;
                            width: 120px;
                            height: 120px;

                            img {
                                width: 120px;
                                height: 120px;
                            }

                            .name {
                                text-align: center;
                                line-height: 18px;
                                margin-top: 22px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-size: 14px;
                                color: #000;
                            }

                            .tip {
                                text-align: center;
                                line-height: 14px;
                                margin-top: 5px;
                                font-size: 12px;
                                color: #999999;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            &:hover .tip,
                            &:hover .name {
                                color: #f60;
                            }
                        }
                    }
                }

                .col-1 {
                    width: 200px !important;
                }

                .col-2 {
                    width: 400px !important;
                }
            }
        }


    }

    .content {
        position: relative;
        height: 480px;

        img {
            width: 1200px;
            height: 480px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .circle {
            position: absolute;
            transform: translate(600px, 50%);
            bottom: 20px;
            padding: 0 8px;
            min-width: 110px;
            height: 36px;
            overflow: hidden;
            text-align: center;
            border-radius: 20px;
            z-index: 10;

            li {
                float: left;
                width: 10px;
                height: 10px;
                margin: 10px 4px 10px 3px;
                background-color: #d0cece;
                border: #989696 solid 1px;
                border-radius: 50%;
                overflow: hidden;
                opacity: 0.5;
            }

            .active {
                background-color: #fff;
                opacity: 1;
            }
        }
    }
}

.rec_wrap {
    overflow: hidden;
    min-width: 1200px;

    ul {
        width: 1200px;
        overflow: hidden;
        border-bottom: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;

        li {
            float: left;
            height: 200px;

            img {
                width: 200px;
                margin: 15px 49.5px 5px;
            }

            &:hover img {
                transition: all 0.5s;
                margin-top: 8px;
            }
        }

        li:nth-child(1) {
            width: 298px;
            border: 1px solid #e0e0e0;
            border-bottom: none;
            border-top: none;
        }

        li:nth-child(2) {
            width: 298px;
            border-right: 1px solid #e0e0e0;
        }

        li:nth-child(3) {
            width: 298px;
            border-right: 1px solid #e0e0e0;
        }

        li:nth-child(4) {
            width: 298px;
            // border-right: 1px solid #e0e0e0;
        }
    }
}

.aside-banner {
    height: 120px;

    a {
        display: block;
        width: 1200px;
        height: 120px;
    }

    img {
        width: 1200px;
        height: 120px;
    }
}

.main-con {
    overflow: hidden;
    min-width: 1200px;
    box-sizing: border-box;

    .con-tit {
        position: relative;
        height: 188px;
        font-size: 0;

        h2 {
            width: 160px;
            height: 68px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;

            background: url(../image/index_title_sprite.png) no-repeat;
            background-size: 160px 115px;
        }
    }

    .main-con-top {
        overflow: hidden;

        .main-con-left {
            width: 600px;
            height: 683px;
            border: 1px solid #e0e0e0;
            border-right: none;
            box-sizing: border-box;

            &:hover img {
                transition: all 0.5s;
                margin-top: 30px;
            }

            .price {
                font-size: 14px;
                color: #f60;
                text-align: center;
            }

            img {
                width: 500px;
                height: 590px;
                margin: 35px 50px 15px;
            }

            a:nth-child(1) {
                display: block;
                height: 640px;
            }
        }

        .main-con-right {
            width: 600px;
            border-left: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
            box-sizing: border-box;

            li:hover img {
                transition: all 0.5s;
                margin-top: 25px;
            }

            li {
                float: left;
                width: 298px;
                height: 340px;
                border-top: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;

                .tit {
                    font-size: 14px;
                    line-height: 14px;
                    color: #333;
                    text-align: center;
                }

                .price {
                    margin-top: 12px;
                    font-size: 14px;
                    text-align: center;

                    span {
                        margin-right: 5px;
                    }

                    span:nth-child(1) {
                        color: #f60;
                    }

                    span:nth-child(2) {
                        font-size: 12px;
                        color: #333;
                    }

                    i {
                        display: inline-block;
                        width: 28px;
                        height: 12px;
                        background: url("../image/pro.png") no-repeat center;
                        background-size: 100%;
                    }
                }

                a:nth-child(1) {
                    display: block;
                    height: 270px;
                }

                a:nth-child(2) {
                    display: block;
                    height: 70px;
                }

                img {
                    width: 200px;
                    height: 200px;
                    margin: 30px 50px 40px;
                }
            }

            li:nth-child(odd) {
                width: 299px;
            }
        }
    }

    .main-con-bottom {
        overflow: hidden;

        .main-con-bl {
            width: 599px;
            height: 680px;
            border: 1px solid #e0e0e0;
            border-top: none;

            .mcbt {
                position: relative;
                height: 340px;

                .special {
                    position: absolute;
                    bottom: 90px;
                    left: 35px;
                }

                .price {
                    margin-top: 12px;
                    font-size: 14px;
                    text-align: center;
                    line-height: 14px;

                    span {
                        margin-right: 5px;
                    }

                    span:nth-child(1) {
                        color: #f60;
                    }

                    span:nth-child(2) {
                        font-size: 12px;
                        color: #333;
                    }

                    i {
                        display: inline-block;
                        width: 28px;
                        height: 12px;
                        background: url("../image/pro.png") no-repeat center;
                        background-size: 100%;
                    }
                }

                &:hover img {
                    transition: all 0.5s;
                    margin-top: 23px;
                }

                a {
                    display: block;
                    height: 340px;
                }

                img {
                    widows: 540px;
                    height: 280px;
                    margin: 28px 30px;
                }
            }

            .mcbb {
                width: 600px;
                height: 340px;

                li:nth-child(1) {
                    border-right: 1px solid #e0e0e0;
                }

                li:hover img {
                    transition: all 0.5s;
                    margin-top: 30px;
                }

                li {
                    float: left;
                    width: 299px;
                    height: 340px;
                    border-top: 1px solid #e0e0e0;

                    .tit {
                        font-size: 14px;
                        line-height: 14px;
                        color: #333;
                        text-align: center;
                    }

                    .price {
                        margin-top: 12px;
                        font-size: 14px;
                        text-align: center;
                        line-height: 14px;

                        span {
                            margin-right: 5px;
                        }

                        span:nth-child(1) {
                            color: #f60;
                        }

                        span:nth-child(2) {
                            font-size: 12px;
                            color: #333;
                        }

                        i {
                            display: inline-block;
                            width: 28px;
                            height: 12px;
                            background: url("../image/pro.png") no-repeat center;
                            background-size: 100%;
                        }
                    }

                    a:nth-child(2) {
                        // display: block;
                        float: left;
                        width: 300px;
                        height: 65px;
                    }

                    a:nth-child(1) {
                        display: block;
                        width: 300px;
                        height: 275px;

                        img {
                            width: 200px;
                            height: 200px;
                            margin: 35px 50px 40px;
                        }
                    }
                }
            }
        }

        .main-con-br {
            width: 598px;
            height: 680px;
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;

            &:hover img {
                transition: all 0.5s;
                margin-top: 30px;
            }

            a:nth-child(1) {
                display: block;
                height: 635px;
            }

            a:nth-child(2) {
                display: block;
                height: 45px;

                .price {
                    margin-top: 12px;
                    font-size: 14px;
                    text-align: center;
                    line-height: 14px;

                    span {
                        margin-right: 5px;
                    }

                    span:nth-child(1) {
                        color: #f60;
                    }

                    span:nth-child(2) {
                        font-size: 12px;
                        color: #333;
                    }

                    i {
                        display: inline-block;
                        width: 28px;
                        height: 12px;
                        background: url("../image/pro.png") no-repeat center;
                        background-size: 100%;
                    }
                }
            }

            img {
                width: 500px;
                height: 590px;
                margin: 35px 50px 10px;
            }
        }
    }
}

.member {
    .con-tit {
        position: relative;
        height: 191px;
        font-size: 0;

        h2 {
            width: 160px;
            height: 68px;
            margin: auto;
            margin-top: 80px;

            background: url(../image/index_title_sprite.png) no-repeat;
            background-size: 160px 115px;
            background-position: 0 -75px;
        }

        a {
            display: block;
            font-size: 12px;
            line-height: 12px;
            margin: 0 auto 40px;
            text-align: center;
            color: #999;

            &:hover {
                color: #f30;
            }
        }
    }

    .member-bottom {
        width: 1195px;
        overflow: hidden;
        height: 420px;
        border: 1px solid #e0e0e0;

        ul {
            width: 1200px;
        }

        li {
            float: left;
            width: 299px;
            height: 420px;
            border-right: 1px solid #e0e0e0;

            &:hover img {
                transition: all 0.2s ease-in;
                margin-top: 20px;
            }

            a {
                display: block;
                height: 324px;
            }

            img {
                width: 200px;
                height: 300px;
                margin: 24px 49.5px 16px;
            }

            p {
                width: 120px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                margin: 0 auto;
                border: 1px solid #e0e0e0;
            }
        }

        li:nth-child(4) {
            border-right: none;
        }
    }
}

.footer {
    margin-top: 120px;
    overflow: hidden;

    .footer-top {
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;

        height: 42px;

        h3 {
            float: left;
            width: 150px;
            height: 42px;

            a {
                font-size: 12px;
                display: block;
                width: 150px;
                height: 42px;
                line-height: 42px;
                color: #333;

                &:hover {
                    color: #f60;
                }
            }
        }
    }

    p {
        color: #999;
        height: 42px;
        line-height: 42px;

        span {
            float: left;
        }

        a {
            color: #999;
        }

        // a {
        //     display: block;
        //     float: left;
        //     width: 200px;
        //     height: 20px;
        // }

        // .one {
        //     width: 115px;
        // }

        i:nth-child(1) {
            margin-top: 3px;
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url("../image/footer1.jpg") no-repeat center;
        }

        i:nth-child(2) {
            margin-top: 3px;
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url("../image/footer2.jpg") no-repeat center;
        }
    }
}

.fixScroll {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    width: 62px;

    a {
        display: block;
        width: 62px;
        height: 64px;
        background-color: #404040;
        border-bottom: 1px solid #e0e0e0;
    }

    .item {
        position: relative;

        i {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            display: block;
            width: 38px;
            height: 38px;
            background: url(../image/detail_servic_2.png);
        }
    }

    .item:nth-child(1) {
        i {
            background-position: 0 0;
        }

        &:hover i {
            transition: all 0.4s;
            background-position: 0px -38px;
        }
    }

    .item:nth-child(2) {
        i {
            background-position: -38px 0px;
        }

        &:hover i {
            transition: all 0.4s;
            background-position: -38px -38px;
        }
    }

    .item:nth-child(3) {
        i {
            background-position: -76px 0;
        }

        &:hover i {}
    }

    .item:nth-child(4) {
        i {
            background-position: -114px 0;
        }

        &:hover i {
            background-position: -76px -38px;
        }
    }

    .weChat {
        display: none;
        box-sizing: border-box;
        width: 215px;
        height: 273px;
        position: absolute;
        bottom: 64px;
        left: -215px;
        padding: 38px 37px;
        background-color: #fff;
        border: 1px solid #d6d6d6;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

        .triangle {
            width: 0;
            height: 0;
            font-size: 0;
            line-height: 0px;
            overflow: hidden;
            border-width: 8px 0 8px 8px;
            border-color: transparent transparent transparent #ffffff;
            border-style: dashed dashed dashed solid;
            position: absolute;
            bottom: 26px;
            right: -6px;
        }

        img {
            width: 139px;
            height: 195px;
        }
    }
}